<template>
    <div>
        <!-- <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button> -->

        <el-dialog title="小层智能划分与对比管理" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"
            :show-close="false">
            <div>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogTableVisible = true">类目选择</el-button>
                </span>
                <div class="myForm">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="活动名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="活动区域" prop="region">
                            <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="活动时间" required>
                            <el-col :span="11">
                                <el-form-item prop="date1">
                                    <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
                                        style="width: 100%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col class="line" :span="2">-</el-col>
                            <el-col :span="11">
                                <el-form-item prop="date2">
                                    <el-time-picker placeholder="选择时间" v-model="ruleForm.date2"
                                        style="width: 100%;"></el-time-picker>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                        <el-form-item label="即时配送" prop="delivery">
                            <el-switch v-model="ruleForm.delivery"></el-switch>
                        </el-form-item>
                        <el-form-item label="活动性质" prop="type">
                            <el-checkbox-group v-model="ruleForm.type">
                                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                                <el-checkbox label="地推活动" name="type"></el-checkbox>
                                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item label="特殊资源" prop="resource">
                            <el-radio-group v-model="ruleForm.resource">
                                <el-radio label="线上品牌商赞助"></el-radio>
                                <el-radio label="线下场地免费"></el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="活动形式" prop="desc">
                            <el-input type="textarea" v-model="ruleForm.desc"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <!-- Table -->
        <el-dialog title="上传图片" :visible.sync="dialogTableVisible">
            <!-- <el-tree :props="props" :load="loadNode" lazy>
            </el-tree> -->
            <el-upload class="upload-demo" :action="uploadUrl" :on-preview="handlePreview" :on-remove="handleRemove"
                :file-list="fileList" list-type="picture" :on-success="handleSuccess" :on-error="handleError">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
import api from '@/api/api.js';

export default {
    computed: {
        uploadUrl() {
            return api.defaults.baseURL + '/zndb/uploadFile';
        }
    },

    data() {
        return {
            dialogVisible: false,
            dialogTableVisible: false,
            ruleForm: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择活动区域', trigger: 'change' }
                ],
                date1: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                date2: [
                    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                ],
                type: [
                    { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
                ],
                resource: [
                    { required: true, message: '请选择活动资源', trigger: 'change' }
                ],
                desc: [
                    { required: true, message: '请填写活动形式', trigger: 'blur' }
                ]
            },
            props: {
                label: 'name',
                children: 'zones',
                isLeaf: 'leaf'
            },
            fileList: [{ name: '1.png', url: 'http://localhost:2002/img/image?path=D:/img/1.png' }, { name: '2.png', url: 'http://localhost:2002/img/image?path=D:/img/2.png' }],
        };
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        // loadNode(node, resolve) {
        //     if (node.level === 0) {
        //         return resolve([{ name: 'region' }]);
        //     }
        //     if (node.level > 1) return resolve([]);

        //     setTimeout(() => {
        //         const data = [{
        //             name: 'leaf',
        //             leaf: true
        //         }, {
        //             name: 'zone'
        //         }];

        //         resolve(data);
        //     }, 500);
        // },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log('sssssssssssss');
            console.log(file);
        },
        handleSuccess(response, file, fileList) {
            console.log('上传成功', response, 'bbb', file.name, 'cccccc', fileList);
            this.fileList = fileList; // 更新文件列表，以显示已上传的图片
        },
        handleError(err, file, fileList) {
            console.error('上传失败', err);
        }
    }
};
</script>

<style lang="less"></style>